<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
  </head>
  <body>

    姓名:<input id="username" type="text"/><br>
    发送给：<input type="text" id="toUser"/><br>
    消息内容:<input type="text" id="message" /><button type="button" id="send">发送</button>
    <ul id="message_list">
      
    </ul>
  

    <script src="/socket.io/socket.io.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
    $(function() {
      var socket = io('/chat')
      var from = $('#username').val(),
        msg  = $('#message').val(),
        to   = $('#toUser').val();
      $('#username').blur(function() {
        console.log($('#username').val())
        socket.emit('setName', $('#username').val())
      })
      $("#send").click(function(){
        socket.emit('sayTo', {to:$('#toUser').val(), msg:$('#message').val() })
      });
      socket.on('message',function (msg) {
        console.log(msg)
        $('#message_list').append($('<li>').text(msg))
      });
    })
    </script>
  </body>
</html>